<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_layout/top :: top"></head>
<body>
<div id="page-wrapper">
    <header th:replace="_layout/header :: header"></header>
        <!-- Breadcrumb Start -->
        <div class="page-banner-image w-100 breadcrumb-bar" style="background-image: url(/static/assets/images/background/1.png); background-repeat: no-repeat;">
            <div class="container">
                <div class="row py-5">
                    <div class="col-sm-6">
                        <h3 class="text-white">注册</h3>
                    </div>
                    <div class="col-sm-6">
                        <nav aria-label="breadcrumb" class="float-right">
                            <ol class="breadcrumb mb-0 bg-transparent p-0 mt-2 mt-lg-1">
                                <li class="breadcrumb-item"><a href="#">主页</a></li>
                                <li class="breadcrumb-item"><a href="#">页面</a></li>
                                <li class="breadcrumb-item active" aria-current="page">注册</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    <!-- Breadcrumb End -->


    <div class="full-row">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 mb-5">
                    <h3 class="mb-3 down-line">欢迎词</h3>
                    <p>我爱我车，我的汽车网站，我的汽车之家!</p>
                    <h4 class="mb-5 mt-5 underline">记住几个基本的密码规则 :</h4>
                    <ul class="list-squire-check">
                        <li><i class="fas fa-house-damage text-primary mr-2"></i> 定期更改密码</li>
                        <li><i class="fas fa-house-damage text-primary mr-2"></i> 避免对多个站点重复使用密码</li>
                        <li><i class="fas fa-house-damage text-primary mr-2"></i> 使用包括大写和数字在内的复杂字符</li>
                    </ul>
                </div>
                <div class="col-lg-5">
                    <h3 class="mb-4 down-line">注册</h3>
                    <div class="form-icon-left form-boder">
                        <form action="/register" method="post">
                            <div class="form-row">
                                <div class="col-md-12">
                                    <label>用户名</label><span id="checkName"></span>
                                    <input type="text" name="userName" id="username" class="form-control bg-light" value="" required="">
                                </div>
                                <div class="col-md-12">
                                    <label>电子邮件地址</label>
                                    <input type="email" name="userEmail" class="form-control bg-light" value="" required="">
                                </div>
                                <div class="col-md-12">
                                    <label>密码</label><span id="checkpwd"></span>
                                    <input type="password" name="userpassword" id="userPassword" class="form-control bg-light" value="" required="">
                                </div>
                                <div class="col-md-12">
                                    <label>重新输入密码</label>
                                    <input type="password" id="userPassword2" class="form-control bg-light" value="" required="">
                                </div>
                                <div class="col-md-12 form-check mb-4">
                                    <input class="form-check-input" type="checkbox" value="" id="checkbox1">
                                    <label for="checkbox1">接受条款和条件</label>
                                </div>
                                <div class="col-md-12 form-check">
                                    <button type="submit" class="btn btn-primary mb-3" id="submit">现在就注册</button>
                                </div>
                                <div class="col-md-12">
                                    <a href="#" class="btn-link text-dark">查看条款和条件</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="full-row bg-primary py-5">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <h4 class="text-white mb-2">全天候免费咨询和商务提示</h4>
                    <p class="text-white" >如果您对我们的主题感兴趣，请不要等着购买或致电我们</p>
                </div>
                <div class="col-md-4">
                    <div class="y-center position-relative d-table ml-auto sm-margin-none text-white"><a href="#" class="btn btn-secondary">获得客户支持</a></div>
                </div>
            </div>
        </div>
    </div>
    <footer th:replace="_layout/footer :: footer"></footer>
        <a href="#" class="bg-primary text-white hover-bg-primary" id="scroll"><i class="fa fa-angle-up"></i></a>
    </div>



    <!-- Javascripts -->
    <script src="/static/assets/js/jquery.min.js"></script>
    <script src="/static/assets/js/greensock.js"></script>
    <script src="/static/assets/js/layerslider.transitions.js"></script>
    <script src="/static/assets/js/layerslider.kreaturamedia.jquery.js"></script>
    <script src="/static/assets/js/popper.min.js"></script>
    <script src="/static/assets/js/bootstrap.min.js"></script>
    <script src="/static/assets/js/bootstrap-select.min.js"></script>
    <script src="/static/assets/js/jquery.fancybox.min.js"></script>
    <script src="/static/assets/js/owl.js"></script>
    <script src="/static/assets/js/wow.js"></script>
    <script src="/static/assets/js/mixitup.min.js"></script>
    <script src="/static/assets/js/custom.js"></script>
<script>
        /*验证用户名是否已被注册*/
        $(function () {
            var ps_UserName = {};
            $("#username").blur(function () {
                var name = $("#username").val();
                ps_UserName = {"name":name};
                $.ajax({
                    type: "POST",
                    url:"/checkName",
                    contentType: "application/json",
                    data:JSON.stringify(ps_UserName),
                    success:function (result) {
                        if (result=="该用户名已被注册，请换一个"){
                            $("#checkName").text(result).css("color","red")
                        }else {
                            $("#checkName").text("")
                        }
                    }
                });
            })
            /*验证用户名是否已被注册*/
            $("#userPassword2").blur(function(){
                var pwd1 = document.getElementById("userPassword").value;
                var pwd2 = document.getElementById("userPassword2").value;
                <!-- 对比两次输入的密码 -->
                if(pwd1 == pwd2) {
                    $("#checkpwd").text("两次密码相同").css("color","red")
                }
                else {
                    $("#checkpwd").text("两次密码不同").css("color","red")
                    $("#submit").disabled = true;
                }
            })
        });


</script>
</body>
</html>